@mixin be-icon-default($color) {
  .be-icon {
    use {
      fill: $color;
    }
  }
}

@mixin be-tag-type($bgColor,$textColor,$hoverColor) {
  background: $bgColor;
  color: $textColor;
  border: 0;
  &:hover {
    background: $hoverColor;
  }
}

.be-tag {
  @apply inline-flex justify-center items-center cursor-pointer box-border;
  span {
    @apply mr-1.5;
  }

  .be-icon-container .be-icon {
    @apply w-4 h-4;
  }
}

.be-tag__disabled {
  @apply cursor-not-allowed;
}

.be-tag__mini {
  @apply box-border px-2.5 h-6 leading-6 text-xs;
}

.be-tag__medium {
  @apply box-border px-2.5 h-8 leading-8;
}

.be-tag__large {
  @apply box-border px-2.5 h-10 leading-10;
}

.be-tag__error {
  @include be-tag-type($error, $whiteText, $errorHover);
  @include be-icon-default($whiteText);
}

.be-tag__info {
  @include be-tag-type($default, $defaultText, $infoHover);
  @include be-icon-default($defaultText);
  border: 1px solid $infoHover;
}

.be-tag__success {
  @include be-tag-type($success, $whiteText, $successHover);
  @include be-icon-default($whiteText);
}

.be-tag__warning {
  @apply bg-warning border-0 text-white hover:bg-warningh;
  @include be-icon-default($whiteText);
}

.be-tag__primary {
  @include be-tag-type($primary, $primaryText, $primaryHover);
  @include be-icon-default($primaryText);

  &:hover {
    background: $primaryHover;
    color: $whiteText;
    border-color: $primaryText;

    .be-icon {
      use {
        fill: $whiteText;
      }
    }
  }
}

.be-tag__default {
  @include be-tag-type($default, $defaultText, $defaultText);
  @include be-icon-default($defaultText);

  &:hover {
    color: $primaryText;
    background: $primary;

    .be-icon {
      use {
        fill: $primaryText;
      }
    }
  }
}

